<template>
  <div>
    <audio ref="audio">
      <source :src="mp3Url">
    </audio>
    <n-space style="margin-bottom: 10px" justify="space-between">
      <n-space>
        <n-select style="width: 200px" :options = keyWordExtractOptions  v-model:value="extractOption">
        </n-select>
        <n-popconfirm
            @positive-click="gptImagesDescription"
        >
          <template #trigger>
            <n-button type="primary">批量推理</n-button>
          </template>
          <n-checkbox v-model:checked="gptImagesDescriptionSkip">跳过已完成推理分镜？</n-checkbox>
        </n-popconfirm>
        <n-divider vertical></n-divider>
        <n-button type="primary" @click="initBatchOperationForm">批量出图</n-button>
        <n-button type="primary" @click="viewOption.upscaleModalShow=true">批量放大</n-button>
        <n-divider vertical></n-divider>
        <n-button type="info" @click="matchCharacter">人物标签匹配</n-button>
      </n-space>
      <n-select
          style="width: 200px;"
          :options="storyBoardSelectType"
          v-model:value="storyBoardSelectOption"
          @update:value="getStoryBoardByChapterId">
      </n-select>
    </n-space>
    <n-spin :show="tableLoading" size="large">
    <n-virtual-list :ignore-item-resize="true"   :style="{ height:( clientHeight - layoutHeaderHeight  - tabsHeight - 50) + 'px'}"   :item-size="420" v-if="dataList.boardList.length>0" :items="dataList.boardList">
      <template   #default=" {item} ">
          <n-tr>
          <n-td style="width: 60px;padding: 2px 2px 2px 2px; ">
            <n-grid :x-gap="5" :y-gap="5">
                <n-grid-item :span="24">
                  <n-card content-style="padding: 5px 5px 5px 5px">
                  <n-button size="small" :type="item.orderNum%2==0?'primary':'primary'" secondary strong block>
                    操作
                  </n-button>
                  <div style="height: 395px;overflow-y: auto">
                    <n-space justify="center" style="margin-top: 80px">
                      第{{item.orderNum}}镜
                      <n-button type="error"   block @click="deleteBoard(item)">删除分镜</n-button>
                      <n-button type="primary" block style="margin-top:5px;" @click="addBoard(item)">插入分镜</n-button>
                      <n-button type="info" :loading="item.loading" block style="margin-top:5px;"
                                @click="gptImageDescription(item)">推理分镜
                      </n-button>
                    </n-space>
                  </div>
                  </n-card>
              </n-grid-item>
            </n-grid>
          </n-td>
          <n-td style="padding: 2px 2px 2px 2px;width: 700px;">
            <n-grid :x-gap="5" :y-gap="5">
              <n-grid-item :span="24">
                <n-card content-style="padding: 5px 5px 5px 5px">
                  <n-button size="small" :type="item.orderNum%2==0?'primary':'primary'" secondary strong block>
                    原文
                  </n-button>
                  <div style="height: 395px;overflow-y: auto">
                    <VueDraggableNext v-model="item.sentenceList" handle=".handle" group="storySentence"
                                      @add="onStorySentenceAdd" @change="onStorySentenceChange">
                      <n-input-group v-if="option.voiceOption" v-for="(sentence,i) in item.sentenceList"
                                     style="margin-top: 5px;">
                        <n-popselect
                            v-if="voiceConfig && voiceConfig.planType==='systemVoice'"
                            @update:value="updateAudioConfig($event,sentence)"
                            v-model:value="sentence.audioConfig.voiceName"
                            :options="option.voiceOption"
                            scrollable
                            trigger="click">
                          <n-button class="handle" type="primary">
                            {{ getVoiceLabelName(sentence.audioConfig) }}
                          </n-button>
                        </n-popselect>

                        <n-button
                            v-if="voiceConfig &&( voiceConfig.planType == 'videoVoice' || voiceConfig.planType == 'uploadVoice')"
                            scrollable
                            type="primary"
                            trigger="click"
                            class="handle">
                          拖拽
                        </n-button>
                        <n-tooltip trigger="hover">
                          <template #trigger>
                            <n-button type="info" @click="sentenceMerge(sentence,'up')">
                              <n-icon>
                                <ArrowUp/>
                              </n-icon>
                            </n-button>
                          </template>
                          向上合并
                        </n-tooltip>
                        <n-input
                            v-model:value="item.sentenceList[i].content"
                            style="width: 450px;"
                            @keydown.enter="handlerEnter(item.sentenceList[i], $event)"
                            @update:value=" item.sentenceList[i].isChange = 1"
                            @blur="updateSentence(item.sentenceList[i])">
                        </n-input>
                        <n-tooltip trigger="hover">
                          <template #trigger>
                            <n-button type="info" @click="sentenceMerge(sentence,'down')">
                              <n-icon>
                                <ArrowDown/>
                              </n-icon>
                            </n-button>
                          </template>
                          往下合并
                        </n-tooltip>
                        <n-popconfirm @positive-click="deleteSentence(sentence)">
                          <template #trigger>
                            <n-button type="warning">
                              <n-icon>
                                <CloseSharp/>
                              </n-icon>
                            </n-button>
                          </template>
                          确定删除该句内容吗？
                        </n-popconfirm>
                      </n-input-group>
                    </VueDraggableNext>
                  </div>
                </n-card>
              </n-grid-item>

            </n-grid>
          </n-td>
          <n-td style="padding: 2px 2px 2px 2px;width: 1000px;">
            <n-grid :x-gap="5" :y-gap="5">
              <n-grid-item :span="14">
                <n-card content-style="padding: 5px 5px 5px 5px">
                  <n-button size="small" :type="item.orderNum%2==0?'primary':'primary'" secondary strong block>
                    关键词
                  </n-button>
                  <div style="height: 390px;overflow-y: auto;margin-top:5px;">
                    <n-input
                        style="height:calc(100% - 2px);width: 100%"
                         type="textarea"
                         v-model:value="item.prompt"
                         @update:value=" item.isChange = 1"
                         @blur="updateBoard(item)">
                    </n-input>
                   </div>
                </n-card>
              </n-grid-item>
              <n-grid-item :span="10">
                <n-grid :y-gap="5">
                  <n-grid-item :span="24">
                    <n-card content-style="padding: 5px 5px 5px 5px">
                      <n-button size="small" :type="item.orderNum%2==0?'primary':'primary'" secondary strong block>
                        人物
                      </n-button>
                      <div style="height: 174px;overflow-y: auto">
                          <n-grid>
                          <n-grid-item :span="24">
                              <div style="height: 70px;overflow-y: auto">
                                  <n-checkbox-group
                                      v-model:value="item.characterList"
                                      @update:value="characterChecked($event,item)" >
                                      <n-checkbox
                                          v-for="character in option.characterOption"
                                          :value="character.id"
                                          :label="character.characterName" >
                                      </n-checkbox>
                                  </n-checkbox-group>
                              </div>
                          </n-grid-item>

                          <n-grid-item :span="12">
                              <n-space justify="center" style="padding: 0px 0px 0px 0px;">
                              <div style="height: 100px;overflow-y: auto">
                                 <n-image
                                     :preview-disabled="true"
                                     style="height: 80px"
                                     :lazy="true"
                                     :object-fit="'scale-down'"
                                     v-if="option.characterOption && option.characterOption.length > 0 && item.characterList && item.characterList.length > 0 && getCharacterInfo(item.characterList[0])"
                                     :src="fileFunction.getCharacterInfoImage(getCharacterInfo(item.characterList[0]))"
                                 >
                                 </n-image>
                              </div>
                              </n-space>
                          </n-grid-item>

                          <n-grid-item :span="12">
                              <n-space justify="center" style="padding: 0px 0px 0px 0px;">
                              <div style="height: 100px;overflow-y: auto">
                                  <n-image
                                      :preview-disabled="true"
                                      style="height: 80px"
                                      :lazy="true"
                                      :object-fit="'scale-down'"
                                      v-if="option.characterOption && option.characterOption.length > 1 && item.characterList && item.characterList.length > 1 && getCharacterInfo(item.characterList[0])"
                                      :src="fileFunction.getCharacterInfoImage(getCharacterInfo(item.characterList[1]))"
                                  >
                                  </n-image>
                              </div>
                              </n-space>
                          </n-grid-item>

                          </n-grid>
                      </div>
                      <n-grid>
                        <n-grid-item :span="6">
                          <n-tooltip placement="top-start" trigger="hover">
                              <template #trigger>
                              相似度:
                              </template>
                              相似度默为100：
                              <br>
                              参考原图的脸部，头发和衣服
                              <br>
                              提示词中不需要人物的形象提示词
                              <br>
                              相似度为0：
                              <br>
                              参考原图脸部和头发
                          </n-tooltip>
                        </n-grid-item>
                        <n-grid-item :span="18">
                          <n-space vertical>
                            <n-slider style="width: 95%" v-model:value="item.similarity" @update:value="(value) => similarityChange(item,value)"   />
                          </n-space>
                        </n-grid-item>
                      </n-grid>
                    </n-card>
                  </n-grid-item>
                  <n-grid-item :span="24">
                    <n-card content-style="padding: 5px 5px 5px 5px">
                      <n-button size="small" :type="item.orderNum%2==0?'primary':'primary'" secondary strong block>
                        场景、视角、镜头
                      </n-button>
                      <div style="height: 154px;overflow-y: auto">
                        <n-select
                            placeholder="请选择场景"
                            v-model:value="item.sceneName"
                            :options=option.sceneOption
                            label-field="sceneName"
                            value-field="id"
                            :clearable="true"
                            size="small"
                            filterable
                            style="margin-top: 5px;"
                            @update:value="(value,option)=>{
                                sceneChecked(value,option,item)
                              }">
                        </n-select>


                        <n-select
                            placeholder="请选择视角"
                            v-model:value="item.angle"
                            :options=option.angleOption
                            label-field="zh"
                            value-field="en"
                            :clearable="true"
                            size="small"
                            filterable
                            style="margin-top: 5px;"
                            @update:value="(value,option)=>{
                                angleChecked(value,option, item)
                              }">
                        </n-select>

                        <n-select
                            placeholder="请选择镜头"
                            v-model:value="item.camera"
                            :options=option.cameraOption
                            label-field="zh"
                            size="small"
                            value-field="en"
                            :clearable="true"
                            filterable
                            style="margin-top: 5px;"
                            @update:value="(value,option)=>{
                                cameraChecked(value,option, item)
                              }">
                        </n-select>

                      </div>
                    </n-card>
                  </n-grid-item>
                </n-grid>
              </n-grid-item>
            </n-grid>
          </n-td>
                          <n-td v-if="voiceConfig?.planType==='systemVoice'" style="padding: 2px 2px 2px 2px; ">
                              <n-grid :x-gap="5" :y-gap="5">
                                  <n-grid-item :span="24">

                                      <n-card content-style="padding: 5px 5px 5px 5px">
                                          <n-button size="small" :type="item.orderNum%2==0?'primary':'primary'" secondary strong block>
                                              音频
                                          </n-button>
                                          <div style="height: 367px;overflow-y: auto">
                              <n-icon  style="margin-top: 200px" :size="20" v-if="item.audioUrl" @click="audio.src = fileFunction.getViewFilePathByUserFileId(item.audioUrl); audio.play()">
                                <CaretForwardCircleSharpIcon></CaretForwardCircleSharpIcon>
                              </n-icon>
                            </div>

                          <n-grid :cols="1" :x-gap="5">
                              <n-grid-item>
                                  <n-button size="small" type="info" block v-if="voiceConfig && voiceConfig.planType ==='systemVoice' " :loading="item.audioButtonLoading" secondary strong
                                            @click="reTts(item)">生成
                                  </n-button>
                              </n-grid-item>
                          </n-grid>
                            </n-card>
                                  </n-grid-item>
                              </n-grid>
                          </n-td>
                          <n-td style="padding: 2px 2px 2px 2px;width: 600px;">
                            <n-grid :x-gap="5" :y-gap="5">
                              <n-grid-item :span="24">
                                <n-card content-style="padding: 5px 5px 5px 5px">
                                  <n-button size="small" :type="item.orderNum%2==0?'primary':'primary'" secondary strong block>
                                    选中图片
                                  </n-button>
                                  <div style="height: 200px;overflow-y: auto">
                                    <n-grid>
                                      <n-grid-item :span="24" style="margin-bottom: 2px;">
                                        <n-space justify="center">
                                          <n-image
                                              :height="155"
                                              object-fit="scale-down"
                                              :src="fileFunction.getViewFilePathByUserFileId(item.imageUrl)"></n-image>
                                        </n-space>
                                      </n-grid-item>
                                      <n-grid-item :span="24">
                                        <n-grid :x-gap="5">
                                          <n-grid-item :span="6">
                                            <n-button size="small" type="info" secondary strong :loading="item.buttonLoading"  block @click="rePaint(item)">生成</n-button>
                                          </n-grid-item>
                                          <n-grid-item :span="6">
                                              <n-space justify="center">
                                               <n-upload
                                                  :custom-request="(uploadOption) =>customRequest(uploadOption,item,'single')">
                                                   <n-space justify="center">
                                                       <n-button :loading="uploadLoading" secondary type="info" size="small">
                                                          上传单张
                                                       </n-button>
                                                   </n-space>
                                               </n-upload>
                                              </n-space>
                                          </n-grid-item>
                                            <n-grid-item :span="6">
                                                <n-space justify="center">
                                                    <n-upload
                                                        :custom-request="(uploadOption) =>customRequest(uploadOption,item,'batch')">
                                                        <n-space justify="center">
                                                            <n-button :loading="uploadLoading" secondary type="info" size="small">
                                                                上传套图
                                                            </n-button>
                                                        </n-space>
                                                    </n-upload>
                                                </n-space>
                                            </n-grid-item>


                                            <n-grid-item :span="6">
                                                <n-button size="small" type="info" secondary strong :loading="item.upscaleLoading" block  @click="upsacle(item)">放大</n-button>
                                            </n-grid-item>
                                        </n-grid>
                                        <n-space>
                                        </n-space>
                                      </n-grid-item>
                                    </n-grid>
                                  </div>
                                </n-card>
                              </n-grid-item>
                              <n-grid-item :span="24">
                                <n-card content-style="padding: 5px 5px 5px 5px">
                                  <n-button size="small" :type="item.orderNum%2==0?'primary':'primary'" secondary strong block>
                                    配图集
                                  </n-button>
                                  <div style="height: 122px;overflow-y: auto">
                                    <n-space justify="center">
                                      <n-image
                                          v-if="item.imageList"
                                          v-for="image in item.imageList.slice(0,3)"
                                          style="padding-right: 5px;"
                                          :width="100"
                                          object-fit="scale-down"
                                          :src="fileFunction.getViewFilePathByUserFileId(image)"></n-image>
                                    </n-space>
                                  </div>
                                  <n-grid :cols="1" :x-gap="5">
                                    <n-grid-item>
                                      <n-button size="small" block type="info" secondary strong
                                                @click=" selectRow = item ; imageModelShow = true">
                                        共有 {{item.imageList.length}}张图片,重新选择
                                      </n-button>
                                    </n-grid-item>
                                  </n-grid>
                                </n-card>
                              </n-grid-item>
                            </n-grid>
                          </n-td>
          </n-tr>
      </template>
    </n-virtual-list>
    </n-spin>



    <n-modal
        v-model:show="progressModal"
        class="custom-card"
        style="width: 500px"
        preset="card"
        title="任务进度"
        size="huge"
        :bordered="false"
        :mask-closable="false"
        @close="getStoryBoardByChapterId"
    >
      <n-space justify="space-around">
        <n-statistic label="当前进度" :value="currentTaskNum">
          <template #prefix>
          </template>
          <template #suffix>
            / {{ dataList.boardList.length }}
          </template>
        </n-statistic>

        <n-statistic label="成功/失败">
          <template #prefix>
            {{ taskStatus.successNum }}
          </template>
          <template #suffix>
            / {{ taskStatus.failNum }}
          </template>
        </n-statistic>
      </n-space>
      <n-progress
          type="line"
          :percentage=" Math.round(currentTaskNum/dataList.boardList.length*100) "
          :height="30"
          :border-radius="5"
          :fill-border-radius="0"
      />
    </n-modal>

    <n-modal
        v-model:show="addModalShow"
        style="width: 600px"
        preset="card"
        title="插入分镜"
        size="huge"
        :bordered="false"
    >
      <n-form>
        <n-h4>您当前在第
          <n-tag type="primary">{{ addNum }}</n-tag>
          分镜插入分镜,新增分镜编号为:
          <n-tag type="primary">{{ addNum + 1 }}</n-tag>
        </n-h4>
        <n-form-item label="原文">
          <n-input type="textarea" style="height: 100px;" v-model:value="editDataForm.content"></n-input>
        </n-form-item>
        <n-form-item label="关键词">
          <n-input type="textarea" style="height: 100px;" v-model:value="editDataForm.prompt"></n-input>
        </n-form-item>
      </n-form>
      <template #footer>
        <n-space justify="end">
          <n-button @click="addModalShow=false">取消</n-button>
          <n-button type="primary" @click="addOrUpdateBoard">确认</n-button>
        </n-space>
      </template>
    </n-modal>

    <n-modal
        v-model:show="updateModalShow"
        style="width: 800px"
        preset="card"
        title="分镜编辑"
        size="huge"
        :bordered="false"
    >
      <n-form>
        <n-row>
          <n-col span="11">
            <n-form-item label="原文描述">
              <n-input type="textarea" disabled style="height: 100px;"
                       v-model:value="editDataFrom_refer.content"></n-input>
            </n-form-item>
          </n-col>
          <n-col span="2">
            <n-space justify="center" style="margin-top: 50px">
              <n-icon :component="ArrowForwardOutline" size="30"></n-icon>
            </n-space>
          </n-col>
          <n-col span="11">
            <n-form-item label="原文描述">
              <n-input type="textarea" style="height: 100px;" v-model:value="editDataForm.content"></n-input>
            </n-form-item>
          </n-col>
        </n-row>
        <n-row>
          <n-col span="11">
            <n-form-item label="画面关键词">
              <n-input type="textarea" disabled style="height: 100px;"
                       v-model:value="editDataFrom_refer.prompt"></n-input>
            </n-form-item>
          </n-col>
          <n-col span="2">
            <n-space justify="center" style="margin-top: 50px">
              <n-icon :component="ArrowForwardOutline" size="30"></n-icon>
            </n-space>
          </n-col>
          <n-col span="11">
            <n-form-item label="画面关键词">
              <n-input type="textarea" style="height: 100px;" v-model:value="editDataForm.prompt"></n-input>
            </n-form-item>
          </n-col>
        </n-row>
        <n-row>
          <n-col span="11">
            <n-form-item label="关键词翻译">
              <n-input type="textarea" disabled style="height: 100px;"
                       v-model:value="editDataFrom_refer.promptEn"></n-input>
            </n-form-item>
          </n-col>
          <n-col span="2">
            <n-space justify="center" style="margin-top: 50px">
              <n-icon :component="ArrowForwardOutline" size="30"></n-icon>
            </n-space>
          </n-col>
          <n-col span="11">
            <n-form-item label="关键词翻译">
              <n-input type="textarea" style="height: 100px;" v-model:value="editDataForm.promptEn"></n-input>
            </n-form-item>
          </n-col>
        </n-row>
      </n-form>
      <template #footer>
        <n-space justify="end">
          <n-button @click="updateModalShow=false">取消</n-button>
          <n-button type="primary" @click="addOrUpdateBoard">确认</n-button>
        </n-space>
      </template>
    </n-modal>

    <n-modal v-model:show="imageModelShow">
      <n-card
          style="width: 500px"
          :bordered="false"
          size="huge"
          role="dialog"
          aria-modal="true"
      >
        <img-model :row="selectRow" :selectFunction="imageSelected" ></img-model>
      </n-card>
    </n-modal>


    <n-modal
        v-model:show="viewOption.upscaleModalShow"
        :mask-closable=false
        :closable="true"
    >
      <UpscalerView
          :paintConfig="paintConfig"
          :resourceId="props.resourceId"
          :upsacleList="dataList.boardList"
          :closeFunction="upscalerViewClose"
          :storyId="props.storyId">
      </UpscalerView>
    </n-modal>


    <n-modal
        v-model:show="batchOperationForm.batchOperationModalShow"
        :mask-closable=false
    >
      <n-card
          style="width: 600px"
          title="自动任务"
          :bordered="false"
          size="huge">
          <n-alert type="info" style="margin-bottom: 5px;">
            <n-space>
              <n-text>该作品有{{tableTotal}}个分镜，目前加载{{paginationReactive.pageSize * (paginationReactive.page-1) }} 至  {{ Math.min(paginationReactive.pageSize * (paginationReactive.page),tableTotal)}} 分镜 <br>如需要执行全部分镜任务，请调大分页数！</n-text>
            </n-space>
          </n-alert>
          <n-form>
          <n-form-item label="任务类型">
            <n-radio-group v-model:value="batchOperationForm.batchOperationType">
              <n-radio value='0' v-if="voiceConfig && voiceConfig.planType ==='systemVoice' ">生成图片和音频</n-radio>
              <n-radio value="1">仅生成图片</n-radio>
              <n-radio value="2" v-if="voiceConfig && voiceConfig.planType ==='systemVoice' ">仅生成音频</n-radio>
            </n-radio-group>
          </n-form-item>
          <n-grid x-gap="10">
            <n-grid-item :span="12">
              <n-form-item label="开始序号">
                <n-input-number :precision="0"
                                v-model:value="batchOperationForm.batchOperationStartNum"></n-input-number>
              </n-form-item>
            </n-grid-item>
            <n-grid-item :span="12">
              <n-form-item label="结束序号">
                <n-input-number :precision="0" v-model:value="batchOperationForm.batchOperationEndNum"></n-input-number>
              </n-form-item>
            </n-grid-item>
            <n-grid-item :span="12">
              <n-form-item :show-label="false">
                <n-checkbox v-model:checked="skipFlag">跳过已完成</n-checkbox>
              </n-form-item>
            </n-grid-item>
            <n-grid-item :span="12">
              <n-form-item :show-label="false">
                <n-checkbox v-model:checked="runInBack">后台运行</n-checkbox>
              </n-form-item>
            </n-grid-item>
          </n-grid>
          <n-grid ref="progressGridRef" v-if="taskStatus.totalNum!=0">
            <n-grid-item :span="24">
              <n-space justify="space-around">
                <n-statistic label="当前进度" :value="currentTaskNum">
                  <template #prefix>
                  </template>
                  <template #suffix>
                    / {{ taskStatus.totalNum }}
                  </template>
                </n-statistic>
                <n-statistic label="成功/失败">
                  <template #prefix>
                    {{ taskStatus.successNum }}
                  </template>
                  <template #suffix>
                    /
                    <n-gradient-text type="error">{{ taskStatus.failNum }}</n-gradient-text>
                  </template>
                </n-statistic>
              </n-space>
            </n-grid-item>
            <n-grid-item :span="24">
              <n-progress
                  type="line"
                  :percentage=" Math.round((currentTaskNum/taskStatus.totalNum) * 100) "
                  :height="30"
                  :border-radius="5"
                  :fill-border-radius="0"
                  :indicator-placement="'inside'"
                  :processing="batchOperationForm.batchOperationFlag"
              />
            </n-grid-item>
          </n-grid>
        </n-form>

        <template #footer>
          <n-space justify="space-between">
            <n-button
                type="primary"
                @click="startTask"
                :loading="batchOperationForm.loading"
                v-if="!batchOperationForm.batchOperationFlag">开始任务
            </n-button>
            <n-button
                type="warning"
                v-if="!batchOperationForm.batchOperationFlag"
                @click="batchOperationForm.batchOperationModalShow = false">取消
            </n-button>
          </n-space>
          <n-button
              :block="true"
              type="error"
              style="margin-top:5px;"
              @click="shutDownTask"
              v-if="batchOperationForm.batchOperationFlag">终止任务
          </n-button>
        </template>

      </n-card>


    </n-modal>

    <n-drawer display-directive="show" v-model:show="viewOption.openPoseViewShow" :width="drawerWidth">
      <n-drawer-content title="从骨骼图选择" closable>
        <OpenPoseView mode="choseOpenPose" :choseOpenPose="chosenOpenPose"></OpenPoseView>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>
<script setup lang="ts">
import {
  NButton,
  NImage,
  NInput,
  NRadio,
  NRadioGroup,
  NSelect,
  NSpace,
  NTag,
  NTreeSelect,
  UploadCustomRequestOptions,
  useMessage
} from 'naive-ui'
import {h, nextTick, onMounted, reactive, ref} from "vue";
import {storyController} from "@/api/story/story.api";
import {storyBoardController} from "@/api/controller/story/storyBoard.api";
import {ArrowDown, ArrowForwardOutline, ArrowUp, CloseSharp} from '@vicons/ionicons5'
import {storeToRefs} from "pinia";
import {useSystemStore} from "@/store/modules/useSystemStore";
import fileFunction from "@/libs/globalFunction/file";
import {VueDraggableNext} from "vue-draggable-next";
import {storySentenceController} from "@/api/controller/story/storySentenceController.api";
import OpenPoseView from '@/views/pages/configuration/openpose/index.vue'
import {v4 as uuidv4} from "uuid";
import Bus from "@/components/file/box/GlobalUploader/utils/bus";
import {promptControllerApi} from "@/api/prompt/prompt.api";
import imgModel from '@/views/pages/create/novel/components/imgModel.vue'
import {creatorDict} from "@/dictionary/creatorDict";
import {
  CaretForwardCircleSharp as CaretForwardCircleSharpIcon,
} from '@vicons/ionicons5'
import UpscalerView from "@/components/creator/function/upscaler.vue";


const {storyBoardSelectType} = creatorDict()
const message = useMessage()
const story = ref("")
const progressModal = ref(false)
const extractOption = ref('')
const tableLoading = ref(false)
const addOrUpdateLoading = ref(false)
const updateModalShow = ref(false)
const addModalShow = ref(false)
const addNum = ref(0)
const selectedBoard = ref(null)

const drawerWidth = ref(0)
const imageModelShow = ref(false)
const selectRow = ref(null)
const storyBoardSelectOption = ref("0")
const mp3Url = ref('')
const audio = ref(null)
const paintConfig = ref(null)
const stopLoop = ref(false)
const skipFlag = ref(true)
const runInBack = ref(true)
const tableTotal = ref(0)
const gptImagesDescriptionSkip = ref(true)
const uploadLoading = ref(false)

const batchOperationForm = reactive({
  batchOperationType: '0',
  batchOperationLoading: false,
  batchOperationModalShow: false,
  batchOperationStartNum: 0,
  batchOperationEndNum: 0,
  batchOperationAppointFlag: false,
  batchOperationFlag: false,
  loading: false
})

const paginationReactive = reactive({
    page: 1,
    pageSize: 2000,
    pageSizes: [50, 200, 400, 800]
})



// 当前推理的分镜
const currentTaskNum = ref(1)

// 任务状态
const taskStatus = ref({
  successNum: 0,
  failNum: 0,
  totalNum: 0
})


const option = ref({
  voiceOption: [],
  characterOption: [],
  sceneOption: [],
  angleOption: [],
  cameraOption: []
})

const dataList = ref({
  voiceList: [],
  boardList: [],
  characterList: [],

})

const viewOption = ref({
  openPoseViewShow: false,
  upscaleModalShow: false
})

const voiceConfig = ref(null)


const {
  clientHeight,
  layoutHeaderHeight,
  darkTheme,
  tabsHeight
} = storeToRefs(useSystemStore());

const editDataFrom_refer = reactive({
  content: "",
  prompt: "",
  promptEn: ""
})

const editDataForm = reactive({
  id: "",
  chapterId: "",
  content: "",
  prompt: "",
  promptEn: "",
  orderNum: -1,
  characterName: ""
})


const props = defineProps({
  storyId: {
    type: String,
    required: true
  },
  resourceId:{
    type: String,
    required: true
  }
})


// 获取任务列表
const getSetUpOption = () => {
  storyController.getSetUpInfo(props.storyId).then(res => {
    if (res.code === 200) {
      option.value.angleOption = res.data.angleOption
      option.value.cameraOption = res.data.cameraOption
      option.value.sceneOption = res.data.sceneOption
      option.value.characterOption = res.data.characterOption
    }
  })
}


const addBoard = (row: any) => {
  Object.keys(editDataForm).forEach(key => {
    editDataForm[key] = ''
  })
  addNum.value = row.orderNum
  editDataForm.orderNum = row.orderNum + 1
  editDataForm.chapterId = props.storyId
  addModalShow.value = true
}


const getStoryBoardByChapterId = async () => {
  tableLoading.value = true

  const param = {
    storyId: props.storyId,
    page: paginationReactive.page,
    pageSize: paginationReactive.pageSize,
    type: storyBoardSelectOption.value
  }
  storyController.getVideoText(param).then(res => {
    if (res.code === 200) {
      tableTotal.value = res.data.total
      dataList.value.boardList = res.data.records
        dataList.value.boardList.forEach((item: any) => {
          if (item.characterName) {
            item.characterList = item.characterName.split(",")
          }

        })
      } else {
        message.error(res.msg)
      }
    }).finally(()=>{
      tableLoading.value = false
    })

}


onMounted(async () => {
  await getStoryPaintConfig(props.storyId)
  await getVoiceList()
  await getSetUpOption()
  await getStoryBoardByChapterId()

  getPromptOption()
  drawerWidth.value = window.innerWidth - 300
  window.addEventListener('resize', ev => {
    drawerWidth.value = window.innerWidth - 300;
  });
})


const getVoiceList = async () => {
  await storyController.listVoiceActors(props.storyId).then(res => {
    if (res.code === 200) {
      dataList.value.voiceList = res.data
      dataList.value.voiceList.forEach((item: any) => {
        option.value.voiceOption.push({
          label: item.localName + "|" + item.localeNameZh + "|" + item.age,
          value: item.shortName,
          localName: item.localName
        })
      })
    } else {
      message.error(res.msg)
    }
  })
}

const getVoiceLabelName = (voiceConfig: any) => {
  const selectItems = option.value.voiceOption.filter((item: any) => {
    return item.value == voiceConfig.voiceName
  });
  if (selectItems.length > 0) {
    return selectItems[0].localName
  } else {
    voiceConfig.voiceName = option.value.voiceOption[0].value
    return option.value.voiceOption[0].localName
  }
}


const deleteSentence = (sentence: any) => {
  // 找到分镜
  const storySentence = findSentences(sentence.storyBoardId)
  storySentence.splice(sentence.orderNum, 1)
  storySentenceController.deleteStorySentence(sentence).then(res => {
    if (res.code != 200) {
      message.error(res.msg)
    }else {
      storySentence.forEach((item: any, index: number) => {
        item.orderNum = index
      })
      updateSentences([sentence.storyBoardId], storySentence)
    }
  })
}


/***
 * 按下回车键,分镜内新增句子
 * @param item
 * @param event
 */
const handlerEnter = (item: any, event: any) => {
  const cursorPosition = event.target.selectionStart;
  const inputBeforeCursor = item.content.substring(0, cursorPosition);
  const inputAfterCursor = item.content.substring(cursorPosition);
  const sentences = findSentences(item.storyBoardId)
  const addSentences = {...item}
  addSentences.orderNum = addSentences.orderNum + 1
  addSentences.content = inputAfterCursor
  addSentences.id = uuidv4()
  for (let i = 0; i < sentences.length; i++) {
    const sentence = sentences[i];
    if (sentence.orderNum < item.orderNum) {
      continue
    }
    if (sentence.orderNum == item.orderNum) {
      sentences[i].content = inputBeforeCursor
    } else {
      sentence.orderNum = sentence.orderNum + 1
    }
  }
  sentences.push(addSentences)
  sentences.sort((a: any, b: any) => {
    return a.orderNum - b.orderNum
  })
  let storyBoardIdList = [item.storyBoardId]
  updateSentences(storyBoardIdList, sentences)
}

const findStoryBoard = (storyBoardId: string) => {
  for (let i = 0; i < dataList.value.boardList.length; i++) {
    if (dataList.value.boardList[i].id == storyBoardId) {
      return dataList.value.boardList[i]
    }
  }
}


/**
 * 根据分镜ID查询分镜的句子
 * @param storyBoardId
 */
const findSentences = (storyBoardId: string) => {
  for (let i = 0; i < dataList.value.boardList.length; i++) {
    if (dataList.value.boardList[i].id == storyBoardId) {
      return dataList.value.boardList[i].sentenceList
    }
  }
}

const onStorySentenceChange = (event: any) => {
  if (event.moved) {
    /**
     * 分镜内移动
     */
    let storyBoardIdList = []
    const storyBoardId = event.moved.element.storyBoardId
    storyBoardIdList.push(storyBoardId)
    const sentences = findSentences(storyBoardId)
    sentences.forEach((item: any, index: number) => {
      item.orderNum = index
    })
    updateSentences(storyBoardIdList, sentences)
  }
}

const updateSentences = (storyBoardIdList: any, sentenceList: any) => {
  const param = {
    sentences: sentenceList,
    storyBoardIdList: storyBoardIdList
  }
  storySentenceController.batchHandlerSentences(param).then(res => {
    if (res.code != 200) {
      message.error(res.msg)
    }
  })
}


const onStorySentenceAdd = () => {
  let storyBoardIdList = []
  let needToUpdateSentence = []
  let sentencesNeedToUpdate = findNeedToUpdateStoryBoard()
  console.log(sentencesNeedToUpdate)
  sentencesNeedToUpdate.forEach(uniqueSet => {
    uniqueSet.forEach(value => {
      storyBoardIdList.push(value)
      let sentences = findSentences(value)
      for (let i = 0; i < sentences.length; i++) {
        let sentence = sentences[i]
        sentence.storyBoardId = value
        sentence.orderNum = i
        needToUpdateSentence.push(sentence)
      }
    })
  })
  updateSentences(storyBoardIdList, needToUpdateSentence)
}


const findNeedToUpdateStoryBoard = () => {
  return dataList.value.boardList.map(storyboard => {
    let uniqueSet = new Set(storyboard.sentenceList.map(item => item.storyBoardId));
    if (uniqueSet.size > 1) {
      return uniqueSet
    } else if (uniqueSet.size == 1 && storyboard.id != storyboard.sentenceList[0].storyBoardId) {
      uniqueSet.add(storyboard.id)
      return uniqueSet
    }
    return null; // 如果条件不满足，则返回null
  }).filter(result => result !== null);
}

const nextStep = (callback: any) => {
  storyController.checkStoryBoardPrompt(props.storyId).then(res => {
    if (res.code === 200) {
      callback(true)
    } else {
      message.error(res.data);
      callback(false)
    }
  })
}

const updateAudioConfig = (value: any, sentence: any) => {
  sentence.audioConfig.voiceName = value
  dataList.value.voiceList.forEach((item: any) => {
    if (item.shortName === value) {
      sentence.audioConfig.voiceLocaleName = item.localeName
    }
  })
  updateStorySentence(sentence)
}

const updateStorySentence = (storySentence: any) => {
  storySentenceController.addOrUpdateStorySentence(storySentence).then(res => {
    if (res.code != 200) {
      message.error(res.msg)
    } else {
      storySentence.isChange = '0'
    }
  })
}


const sentenceMerge = (sentence: any, type: string) => {
  const orderNum = sentence.orderNum
  const sentences = findSentences(sentence.storyBoardId)
  if (orderNum == 0 && type == 'up') {
    // 找到上一个分镜
    const storyBoard = findStoryBoard(sentence.storyBoardId)
    if (storyBoard.orderNum == 0) {
      message.error('无法向上合并了')
      return
    }
    let updateSentenceCollection = []
    const lastStoryBoard = dataList.value.boardList[storyBoard.orderNum - 1]
    const preSentences = lastStoryBoard.sentenceList
    console.log(preSentences)
    // // 找到合并的句子
    const preSentenceMerge = preSentences[preSentences.length - 1]
    preSentenceMerge.content = preSentenceMerge.content + sentence.content
    sentences.splice(orderNum, 1)
    sentences.forEach((item: any, index: number) => {
      item.orderNum = index
      updateSentenceCollection.push(item)
    })
    preSentences.forEach((item: any, index: number) => {
      item.orderNum = index
      updateSentenceCollection.push(item)
    })
    let storyBoardIdList = [lastStoryBoard.id, storyBoard.id]
    updateSentences(storyBoardIdList, updateSentenceCollection)
  } else if (orderNum == sentences.length - 1 && type == 'down') {
    const storyBoard = findStoryBoard(sentence.storyBoardId)
    if (storyBoard.orderNum == dataList.value.boardList.length - 1) {
      message.info('无法向下合并了')
      return
    }
    let updateSentenceCollection = []
    const nextStoryBoard = dataList.value.boardList[storyBoard.orderNum + 1]
    const nextSentences = nextStoryBoard.sentenceList
    // 找到合并的句子
    const nextSentenceMerge = nextSentences[0]
    nextSentenceMerge.content = sentence.content + nextSentenceMerge.content
    sentences.splice(orderNum, 1)
    sentences.forEach((item: any, index: number) => {
      item.orderNum = index
      updateSentenceCollection.push(item)
    })
    nextSentences.forEach((item: any, index: number) => {
      item.orderNum = index
      updateSentenceCollection.push(item)
    })
    let storyBoardIdList = [nextStoryBoard.id, storyBoard.id]
    updateSentences(storyBoardIdList, updateSentenceCollection)
  } else {
    // 分镜内合并
    if (type == 'up') {
      const preSentence = sentences[orderNum - 1]
      preSentence.content = preSentence.content + sentence.content
      sentences.splice(orderNum, 1)
    } else {
      const nextSentence = sentences[orderNum + 1]
      sentence.content = sentence.content + nextSentence.content
      sentences.splice(orderNum + 1, 1)
    }
    let storyBoardIdList = [sentence.storyBoardId]
    updateSentences(storyBoardIdList, sentences)
  }
}


const characterChecked = (e: any, item: any) => {
    if(item.characterList && item.characterList.length >2){
        item.characterList = item.characterList.slice(0,2)
        window.$message.warning('最多选择两个角色')
        return false
    }
  const ids = option.value.characterOption.filter((character: any) => {
    if (e.includes(character.id)) {
      return true
    }
  })
  if (ids.length > 2) {
    return false;
  }
  const characterNames = []
  for (let i = 0; i < ids.length; i++) {
    characterNames.push(ids[i].id)
  }
  item.characterName = characterNames.join(",")
  updateBoard(item)
}

const sceneChecked = (value: any, meta: any, item: any) => {
  updateBoard(item)
}

const cameraChecked = (value: any, meta: any, item: any) => {
  updateBoard(item)
}

const angleChecked = (value: any, meta: any, item: any) => {
  updateBoard(item)
}

const updateBoard = (item: any) => {
  const param = {...item}
  delete param.characterList

  storyBoardController.addOrUpdateBoard(param).then(res => {
    if (res.code !== 200) {
      message.error(res.msg)
    }
  })
}

// 更新分镜信息
const addOrUpdateBoard = () => {
  addOrUpdateLoading.value = true
  storyBoardController.addOrUpdateBoard(editDataForm).then(res => {
    addOrUpdateLoading.value = false
    if (res.code === 200) {
      message.success(res.msg)
      getStoryBoardByChapterId()
      addModalShow.value = false
      updateModalShow.value = false
    } else {
      message.error(res.msg)
    }
  })
}


const chosenOpenPose = (openPose: any) => {
  selectedBoard.value.openPose = openPose.id
  selectedBoard.value.poseExampleBackground = openPose.poseExampleBackground
  selectedBoard.value.poseExampleImage = openPose.poseExampleImage
  updateBoard(selectedBoard.value)
  viewOption.value.openPoseViewShow = false
}

/**
 * 删除分镜
 * @param row
 */
const deleteBoard = (row: any) => {
  window.$dialog.warning({
    title: "温馨提醒",
    content: "是否继续删除第(" + row.orderNum + ")号分镜信息？",
    positiveText: "确定",
    negativeText: "取消",
    onPositiveClick: () => {
      storyBoardController.deleteBoard(row.id, row.chapterId).then(res => {
        if (res.code === 200) {
          message.success(res.msg)
          getStoryBoardByChapterId()
        } else {
          message.error(res.msg)
        }
      })
    }
  })
}


const gptImagesDescription = async () => {
  progressModal.value = true
  currentTaskNum.value = 0
  taskStatus.value = {
    successNum: 0,
    failNum: 0
  }
  for (const item of dataList.value.boardList) {
    currentTaskNum.value++
    console.log(item)
    if (gptImagesDescriptionSkip.value){
      if (item.prompt != null && item.prompt.length > 0){
        taskStatus.value.successNum++
        continue;
      }
    }
    delete item.characterList
    item.content = item.sentenceList.map((item: any) => item.content).join("\n")
    if (!item.content) {
      taskStatus.value.failNum++
      continue
    }
    try {
      const res = await storyController.getImageDescription(item, extractOption.value)
      if (res.code === 200) {
        // 成功
        taskStatus.value.successNum++
      } else {
        // 失败
        taskStatus.value.failNum++
      }
    } catch (e) {
      taskStatus.value.failNum++
    }
  }
  getStoryBoardByChapterId()
}

const gptImageDescription = (row: any) => {
  const storyBorad = {...row}
  row.loading = true
  delete storyBorad.characterList
  row.content = row.sentenceList.map((item: any) => item.content).join("\n")
  if (!row.content) {
    message.error("分镜内容为空")
    row.loading = false
    return
  }
  storyController.getImageDescription(storyBorad, extractOption.value).then(res => {
    if (res.code === 200) {
      // getStoryBoardByChapterId()
      if (res.data){
        row.prompt = res.data.prompt
      }
    } else {
      message.error(res.msg)
    }
  }).finally(() => {
    row.loading = false
  })
}


const cancleOpenPose = (item: any) => {
  item.poseExampleBackground = null
  item.poseExampleImage = null
  item.openPose = null
  updateBoard(item)
}


const updateSentence = (item: any) => {
  if (item.isChange == '1') {
    updateStorySentence(item)
  }
}

defineExpose({
  nextStep
})


/**
 * 获取该章节的绘画配置
 * @param chapterId
 */
const getStoryPaintConfig = async (chapterId: string) => {
  try {
    const res = await storyController.getStoryPaintConfig(chapterId);
    if (res.code === 200) {
      if (res.data != null) {
        paintConfig.value = JSON.parse(res.data.paintConfigText)
        voiceConfig.value = res.data.voiceConfig
      }
    } else {
      message.error(res.msg);
    }
  } catch (error) {
    console.error(error);
  }
}

Bus.on('refreshStoryConfig', () => {
  getStoryPaintConfig(props.storyId)
  getSetUpOption()
  getVoiceList()
  getStoryBoardByChapterId()
})


const keyWordExtractOptions = ref([])
const getPromptOption = () =>{
  promptControllerApi.getGptPromptOption('custom_keyword').then(res => {
    if (res.code === 200) {
      console.log(res.data)
      if(res.data){
        keyWordExtractOptions.value = res.data.map((item: any) => {
          return {
            label: item.promptTitle,
            value: item.id
          }
        })
        keyWordExtractOptions.value.unshift({
          label: 'EasyAI推理大师',
          value: '888'
        })

        keyWordExtractOptions.value.unshift({
          label: 'EasyAI推理大师-省流版',
          value: '999'
        })
        extractOption.value = keyWordExtractOptions.value[0].value
      }

      // extractOption.value = res.data
    }
  })

}



/**
 * 重绘
 * @param row
 */
const rePaint = (row: any) => {
  // 设置当前状态为已提交
  row.buttonLoading = true
  storyBoardController.rePaintStoryBoardAndCheck(row.id, 5 * 60 * 1000).then(res => {
    if (res.taskStatus === 'SUCCESS') {
      const imageFiles = res.userFileId.split(',')
      row.imageUrl = imageFiles[0]
      for (let i = 0; i < imageFiles.length; i++) {
        row.imageList.unshift(imageFiles[i])
      }
    }else {
      window.$notification.error({
        title: "请求错误",
        content: res.failReason,
        duration: 5000,
        keepAliveOnHover: true
      })
    }
  }).finally(() => {
    row.buttonLoading = false
  })
}


const reTts = async (row: any) => {
  row.audioButtonLoading = true
  const res = await storyBoardController.reTtsStoryBoardAndCheck(row.id, 30 * 1000).catch(res => {
    message.error("系统异常,请稍后再试")
  }).finally(() => {
    row.audioButtonLoading = false
  })
  if (res.taskStatus === 'SUCCESS') {
    row.audioUrl = res.userFileId
  }
}


const upscalerViewClose = () =>{
  viewOption.value.upscaleModalShow = false
  getStoryBoardByChapterId()
}



const upsacle = (row: any) => {
  const param = {
    scale: 2,
    upscaleEngine: 'realesrgan',
    modelName: 'realesr-animevideov3',
    skipFlag: false,
    storyBoardId: row.id,
    storyId: props.storyId
  }
  row.upscaleLoading = true
  storyBoardController.upscale(param).then(res => {
    row.interrogateLoading = false
    if (res.code === 200) {
      row.imageList.push(res.data)
      row.imageUrl = res.data
      updateBoard(row)
    } else {
      message.error(res.msg)
    }
  }).finally(() => {
    row.upscaleLoading = false
  })
}

const initBatchOperationForm = () => {
  if(voiceConfig.value?.planType === 'systemVoice'){
    batchOperationForm.batchOperationType = '0'
  }else {
    batchOperationForm.batchOperationType = '1'
  }
  batchOperationForm.batchOperationStartNum = 0
  batchOperationForm.batchOperationEndNum = dataList.value.boardList.length - 1
  batchOperationForm.batchOperationAppointFlag = false
  batchOperationForm.batchOperationModalShow = true
  taskStatus.value.totalNum = 0
  taskStatus.value.successNum = 0
  taskStatus.value.failNum = 0
}

const startTask = async () => {
  if (runInBack.value) {
    const param = {
      operationType: batchOperationForm.batchOperationType,
      storyId: props.storyId,
      skipFlag: skipFlag.value,
      startNum: batchOperationForm.batchOperationStartNum,
      endNum: batchOperationForm.batchOperationEndNum
    }
    batchOperationForm.loading = true
    storyController.startStoryBatchTask(param).then(res => {
      if (res.code === 200) {
        window.$message.success("任务已提交")
      }
    }).finally(() => {
      batchOperationForm.loading = false
      batchOperationForm.batchOperationModalShow = false
    })
  } else {
    stopLoop.value = false
    currentTaskNum.value = 0
    taskStatus.value = {
      successNum: 0,
      failNum: 0,
      totalNum: batchOperationForm.batchOperationEndNum - batchOperationForm.batchOperationStartNum + 1
    }
    batchOperationForm.batchOperationFlag = true
    for (let i = batchOperationForm.batchOperationStartNum;
         i <= batchOperationForm.batchOperationEndNum;
         i++) {
      if (stopLoop.value) {
        break
      }
      currentTaskNum.value++
      const item = dataList.value.boardList[i]
      if (batchOperationForm.batchOperationType === '0' || batchOperationForm.batchOperationType === '1') {
        if (skipFlag.value) {
          if (item.imgFileId != null && item.imgFileId.length > 0) {
            // 跳过
            taskStatus.value.successNum++
            continue
          }
        }
        // 开启绘画任务
        try {
          if (batchOperationForm.batchOperationType === '0') {
            // 同步发送
            await storyController.reTtsStoryBoard(item.id)
          }
          const res = await storyBoardController.rePaintStoryBoardAndCheck(item.id, 1.5 * 60 * 1000)
          if (res.taskStatus === 'SUCCESS') {
            // 成功
            taskStatus.value.successNum++
          } else {
            // 失败
            taskStatus.value.failNum++
          }
        } catch (e) {
          taskStatus.value.failNum++
        }
      } else {
        try {
          if (skipFlag.value) {
            if (item.audioFileId != null && item.audioFileId.length > 0) {
              // 跳过
              taskStatus.value.successNum++
              continue
            }
          }
          const res_tts = await storyBoardController.reTtsStoryBoardAndCheck(item.id, 30 * 1000)
          if (res_tts.taskStatus === 'SUCCESS') {
            // 成功
            taskStatus.value.successNum++
          } else {
            // 失败
            taskStatus.value.failNum++
          }
        } catch (e) {
          taskStatus.value.failNum++
        }
      }
    }
    // batchOperationForm.batchOperationModalShow = false
    batchOperationForm.batchOperationFlag = false
    // 重载数据
    getStoryBoardByChapterId()
  }
}


const shutDownTask = () => {
  window.$dialog.warning({
    title: "提示",
    content: "是否停止任务?",
    positiveText: "确认",
    negativeText: "取消",
    onPositiveClick: () => {
      stopLoop.value = true
      batchOperationForm.batchOperationFlag = false
      batchOperationForm.batchOperationModalShow = false
    }
  })
}

const imageSelected = (userFileId: string) =>{
  selectRow.value.imageUrl = userFileId
  console.log(userFileId)
}


const onPageSizeChange = (pageSize: number) => {
    paginationReactive.pageSize = pageSize
    getStoryBoardByChapterId()
    getPromptOption()
}

const onPageChange = (page: number) => {
    paginationReactive.page = page
    getStoryBoardByChapterId()
    getPromptOption()
}


const renderTag = (tag: string, index: number,item:any) => {

  return h(
      NTag,
      {
        type: index % 2 == 1 ? 'success' : 'info',
        closable: true,
        size: 'small'
      },
      {
        default: () => tag
      }
  )
}

const similarityChange = (item:any , value:any) =>{
  item.similarity = value
  updateBoard(item)
}


const customRequest = (uploadOption: UploadCustomRequestOptions,item:any,type:string) => {
  const reader = new FileReader();
  //@ts-ignore
  reader.readAsDataURL(uploadOption.file.file);
  reader.onloadend = () => {
    let image = new Image()
    image.src = reader.result
    console.log(image.src)
    const param = {
      storyBoardId: item.id,
      base64Image: image.src.split(';base64,')[1],
      imageType: type
    }
      uploadLoading.value = true
    storyBoardController.uploadStoryBoardImage(param).then(res => {
      if (res.code ===200){
          getStoryBoardByChapterId()
      }
    }).finally(() => {
      uploadLoading.value = false
    })
  };
}

const getCharacterInfo = (characterId:string) =>{
    const item = option.value.characterOption.filter((item:any) => {
      if (item.id === characterId){
        return item
      }
    })
    console.log(item[0])
    if (item) {
        if (item.length > 0 && item[0].characterAvatar) {

        return item[0].characterAvatar
            }
    }
    return ''
}


const matchCharacter = () => {
  storyController.matchCharacter(props.storyId).then(res => {
    if (res.code === 200){
      message.success(res.msg)
      getStoryBoardByChapterId()
    }else {
      message.error(res.msg)
    }
  })
}

</script>

